 
 
    <style>
        .cropImg {
            position: relative;
            width: 100%;
            height: 300px;
            background-color: #ccc;
            color: #fff;
            line-height: 300px;
            text-align: center;
            border: 1px dashed rgba(0, 0, 0, .4);
        }

        .cropImg > img {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0);
            -moz-transform: translate3d(-50%, -50%, 0);
            -ms-transform: translate3d(-50%, -50%, 0);
            -o-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
        }
    </style>
 
 
<div id="cropImg" class="cropImg">
    <span>图片剪切</span>
    <img src="">
</div>
<div class="crop" id="crop">
    <input type="file" accept="image/*" class="crop-input">
    <div class="crop-mask"></div>
    <div class="crop-wrap">
        <div class="crop-wrap-content">
            <div class="crop-wrap-thum"></div>
            <div class="crop-wrap-spinner">Loading...</div>
        </div>
        <div class="crop-wrap-group">
            <a href="javascript:;" class="croped">剪切</a>
        </div>
         <div class="crop-wrap-group">
            <a href="javascript:;" class="zoomIn">放大</a>
            <a href="javascript:;" class="zoomOut">缩小</a>
        </div>
 
    </div>
</div>
<form  enctype="multipart/form-data"  id="avatarformid"  >
</form> 

<script>
    var crop = document.querySelector('#cropImg');
    var cropNote = crop.querySelector('span');
    var cropImg = crop.querySelector('img');

    var cropper = new Cropper({
        el: '#crop',
        cp: '#cropImg',
        callback: function (dataURL, dataBlob) {

            cropNote.style.display = 'none';
            cropImg.style.display = 'block';
            cropImg.src = dataURL;
        }
    });
    
    
</script>
 